<script setup lang="ts">
import api from '@/utils/api'
import urlList from '@/utils/urlList'
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted, ref } from 'vue'
import locPng from '@/assets/imgs/loc.png'

/** 考点信息 */
export type ExamLoc = {
  address: string
  area: string
  area_code: string
  city: string
  created_at: string
  exam_id: number
  exam_name: string
  id: number
  images: string[]
  latitude: string
  location_id: number
  location_name: string
  longitude: string
  province: string
  qr_code: string
  videos: string[]
  course_id: string
  data_id: string
  group_qr_code: { url: string; code_name: string }[]
}

defineOptions({
  name: 'PagesIndex',
})

// 获取url携带的参数
const urlParams = new URLSearchParams(window.location.search)

let AMap: any
const loadAMap = async () => {
  window._AMapSecurityConfig = {
    securityJsCode: '93b7d730754dde6e7732d64a0fa7f899',
    // serviceHost: '你的代理服务器域名或地址/_AMapService',
  }
  AMap = await AMapLoader.load({
    key: 'c4b77a1ce13cd936768c68eb108c0acc',
    version: '2.0',
    plugins: ['AMap.DistrictSearch'],
  }).catch(() => null)
}

/** 考点列表 */
const locList = ref<ExamLoc[]>([])
/** 获取考点列表 */
const getLocList = async () => {
  const areaCode = urlParams.get('areaCode')
  const examId = urlParams.get('examId')
  if (!examId) return
  const res = await api<ExamLoc[]>({
    url: urlList.nGetLocation,
    params: {
      area_code: areaCode,
      exam_id: examId,
    },
  }).catch(() => null)
  locList.value = res?.data || []
}
let map: any
/** 初始化地图 */
const initMap = async () => {
  await loadAMap()
  if (!AMap) return
  const districtSearch = new AMap.DistrictSearch({
    showbiz: false,
    extensions: 'base',
    subdistrict: 0,
  })
  //搜索所有省、直辖市信息
  const district = await new Promise<any>((resolve) => {
    districtSearch.search(urlParams.get('cityName'), (status: 'complete' | 'no_data' | 'error', res: any) => {
      console.log('districtSearch.search', status, res)
      if (status === 'complete' && res.info === 'OK') {
        resolve(res.districtList[0])
      }
    })
  })
  map = new AMap.Map('amap-container', {
    center: district.center,
    zoom: 11.5,
  })
  await new Promise<void>((resolve) => {
    map.on('complete', () => {
      resolve()
    })
  })
}
/** 在地图上标记出考点 气泡展示考点名字 */
const markLoc = () => {
  if (!AMap) return
  locList.value.forEach((item) => {
    const icon = new AMap.Icon({
      size: new AMap.Size(26, 26),
      image: locPng,
      imageSize: new AMap.Size(26, 26),
    })
    const marker = new AMap.Marker({
      position: new AMap.LngLat(parseFloat(item.longitude), parseFloat(item.latitude)),
      icon,
      cursor: 'pointer',
      anchor: 'center',
    })
    map.add(marker)
    const textMarker = new AMap.Text({
      position: new AMap.LngLat(parseFloat(item.longitude), parseFloat(item.latitude)),
      text: item.location_name,
      anchor: 'center',
      offset: new AMap.Pixel(0, -24),
      cursor: 'pointer',
      // 高22px 圆角 字体颜色#0054ff 背景色#fff 外阴影 文字居中 字号14px
      style: {
        width: 'max-content',
        padding: '0 6px',
        'background-color': '#fff',
        'border-radius': '11px',
        'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.2)',
        'font-size': '14px',
        color: '#0054ff',
        'text-align': 'center',
        'line-height': '22px',
      },
    })
    map.add(textMarker)
  })
}

onMounted(async () => {
  await Promise.all([initMap(), getLocList()])
  markLoc()
})
onUnmounted(() => {
  if (map) {
    map.destroy()
    map = null
  }
})
</script>

<template>
  <div class="pages-index w-full h-full">
    <div id="amap-container" class="w-full h-full"></div>
  </div>
</template>

<style lang="scss" scoped></style>
